<template>
  <div class="right-chart-2">
    <div class="rc1-header"> 孙七收费站 </div>

    <div class="rc1-chart-container">
      <div class="left">
        <div class="number"> 267 </div>
        <div>设备运行总数</div>
      </div>

      <dv-charts class="right" :option="state.option" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  const state = reactive({
    option: {
      series: [
        {
          type: 'pie',
          data: [
            { name: '收费系统', value: 93 },
            { name: '通信系统', value: 66 },
            { name: '监控系统', value: 52 },
            { name: '供配电系统', value: 34 },
            { name: '其他', value: 22 },
          ],
          radius: ['45%', '65%'],
          insideLabel: {
            show: false,
          },
          outsideLabel: {
            labelLineEndLength: 10,
            formatter: '{percent}%\n{name}',
            style: {
              fontSize: 14,
              fill: '#fff',
            },
          },
        },
      ],
      color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
    },
  });
</script>

<style lang="less">
  .right-chart-2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .rc1-header {
      font-size: 24px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
    }

    .rc1-chart-container {
      flex: 1;
      display: flex;
    }

    .left {
      width: 30%;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .number {
        font-size: 34px;
        color: #096dd9;
        font-weight: bold;
        margin-bottom: 30px;
      }
    }

    .right {
      flex: 1;
      padding-bottom: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }
  }
</style>
